<template>
  <div
    class="c-w100 c-h c-bg-white c-content-auto"
    ref="conttenAuto"
  >
    <!-- 一级分类样式1 -->
    <template v-if="categoryTheme == 1">
      <div class="c-w100 c-ph32 c-pb60 c-flex-row c-flexw-wrap">
        <div
          class="c-ww150 c-h c-mt60 classifyItem"
          v-for="(item, index) in leftList"
          :key="index"
          :id="'selectId' + item.catId"
          @click="handleClickDetail(item.catId, 0, 0, item.name)"
        >
          <div class="c-w100 c-maxh225 c-br10 c-text-ellipsis1">
            <img
              class="c-w100 c-maxh225 c-br10"
              :src="$addXossFilter(item.avatar || require('@/assets/defult270.png'))"
              alt=""
            >
          </div>
          <div class="c-mt10 c-w100 c-flex-row c-flex-center">
            <p
              class="c-fs24 c-text-ellipsis1"
              :class="initCatId == item.catId ?'theme-fc selectScroll':'c-fc-xblack'"
            >{{item.name}}</p>
          </div>
        </div>
      </div>
    </template>
    <template v-if="categoryTheme == 2">
      <div class="c-w100 c-ph30 c-pt10 c-pb30 c-flex-row c-flexw-wrap">
        <div
          v-for="(item, index) in leftList"
          :key="index"
          :id="'selectId' + item.catId"
          :class="initCatId == item.catId ?'theme-bg':'c-bg-sgray'"
          @click="handleClickDetail(item.catId, 0, 0, item.name)"
          class="c-flex-row c-flex-center c-ww280 c-hh88 c-br8 c-ph16 c-pv12 c-mt20 classifyItem1"
        >
          <p
            :class="initCatId == item.catId ?'c-fc-white':'c-fc-xblack '"
            class="c-fs22 c-text-ellipsis2 c-textAlign-c"
          >{{item.name}}</p>
        </div>
      </div>
    </template>
    <template v-if="categoryTheme == 3">
      <div class="c-w100 c-h c-flex-row">
        <!-- 左侧 -->
        <div
          class="c-ww150 c-h c-bg-sgray c-contexty-scroll c-scroll-touch menu-scroll-view"
          ref="scrollTop"
        >
          <div
            class="c-bg-white c-hh100"
            v-for="(item, index) in leftList"
            :key="index"
          >
            <div
              class="c-h c-flex-row c-flex-center c-bg-sgray c-p menu-tab-item"
              @click.stop="swichMenu(index, item.catId)"
              :class="[current==index?'active':'', index == current - 1?'c-br-br10':'', index == current + 1?'c-br-tr10':'']"
            >
              <p
                :class="[current == index ? 'theme-fc c-fw500':'']"
                class="c-fs22 c-textAlign-c c-w100 c-ph20 c-fc-sblack c-text-ellipsis2"
              >{{item.name}}</p>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <!-- c-pl30 c-pr24 c-pt30 -->
        <div
          class="c-bg-white c-w0 c-flex-grow1 c-contexty-scroll c-scroll-touch "
          ref="rightScrollTop"
          id="rightScrollTop"
          @scroll="scrollContent($event)"
        >
          <div class="fixTop">
            <new-search-bar
              @search='startSearch'
              @cancel='startSearch'
            ></new-search-bar>
          </div>
          <div class="c-ph24 c-pt120">
            <template v-for="(item, index) in rightListArr">
              <div
                class="c-flex-row"
                :key="index"
                v-if="item.isShow == 1"
                :class="index == rightListArr.length - 1?'':'c-mb30'"
                @click="handleClickItem(item)"
              >
                <div class="c-ww180 c-maxh270 c-text-ellipsis1 c-mr20 c-p">
                  <img
                    class="c-w100 c-maxh270 c-br10"
                    :src="$addXossFilter(!!item.prodAvatar ? item.prodAvatar : (item.prodType == 8 && item.prodAvatar == '') ? require('@/assets/i/wap/datum/datumsDefault.png') : require('@/assets/defult270.png'))"
                    alt=""
                  >
                  <vip-status v-if="categoryConfs && categoryConfs.catVipBadge == 1" :item="item"></vip-status>
                </div>
                <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb">
                  <p class="c-fs24 c-fc-xblack c-text-ellipsis2">
                    <span v-if="item.prodType == 7" class="c-vcAlign-middle c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</span>
                    <span v-if="item.prodType == 78" class="c-vcAlign-middle c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</span>
                    <span v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-vcAlign-middle c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">{{item.detailInfo.enrollCount | formatNumber}}次预约</span>
                    <span v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-vcAlign-middle c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">更新中</span>
                    <span class="c-vcAlign-middle">{{item.prodName}}</span>
                  </p>
                  <div
                    class="theme-fc c-lh"
                    :class="!showPriceTag(item) ? 'c-fs24':'c-fs26'"
                  >
                    <span v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
                    <span v-else>
                      <span
                        v-if="showPriceTag(item)"
                        class="c-fs18"
                      >{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                    </span>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <loading-status-tem
            :dataStatus="dataStatus"
            noDataText="暂无数据"
          ></loading-status-tem>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "CourseOne",
  components: {
    loadingStatusTem,
    newSearchBar,
    vipStatus
  },
  props: {
    categoryTheme: {
      type: Number,
      default: 1,
    },
    leftList: {
      type: Array,
      default: []
    },
    rightList: {
      type: Array,
      default: []
    },
    initCatId: {
      type: String,
      default: ''
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    categoryConfs: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      rightListArr: [],
      dataStatus: 'HAS_MORE_DATA',
      current: 0, // 预设当前项的值
      theme: localStorage.getItem("colorName") || 'mb5_default',
      menuHeight: 0, //左边菜单的高度
      menuItemHeight: 0, //左边菜单item的高度
      page: 1,
      LIMIT: 10,
      searchText: '',
      termStatus: {
        1: '待招生',
        2: '招生中',
        3: '待开课',
        4: '开课中',
        5: '已结束',
        6: '招生中/开课中',
      },
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    }
  },
  mounted() {
    this.rightListArr = this.rightList;
  },
  activated() {
    this.dataStatus = 'HAS_MORE_DATA';
    this.current = 0;
    this.page = 1;
    this.LIMIT = 10;
    this.searchText = '';
    this.isApp = utilJs.isAndroidApp() || utilJs.isIOSApp();
  },
  watch: {
    currentIndex: function (newVal, oldVal) {
      this.current = newVal
    },
    rightList: function (newVal, oldVal) {
      this.rightListArr = newVal
    },
  },
  computed: {
    showPriceTag() {
      return function(item) {
        return item.detailInfo.payType == 2 || (item.prodType == 7 && !(item.detailInfo.price.split('~')[0] == item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0]) == 0)))
      }
    },
  },
  methods: {
    startSearch(e) {
      this.dataStatus = 'HAS_MORE_DATA';
      this.page = 1;
      this.LIMIT = 10;
      this.searchText = e.searchValue;
      this.rightListArr = [];
      this.initList(1, this.initCatId, 2, this.page, 10, this.searchText);
    },
    handleClickItem(item) {
      this.$emit('handleClickItem', item)
    },
    handleClickDetail(cateId1, cateId2, cateId3, name) {
      this.$emit('handleClickDetail', cateId1, cateId2, cateId3, name);
    },
    contentTo() {
      this.$nextTick(() => {
        let element = document.getElementById(`selectId${this.initCatId}`);
        let scrollTop = element.offsetTop - element.offsetHeight;
        this.$refs.conttenAuto.scrollTo({
          top: scrollTop,
        })
      })
    },
    scrollContent(event) {
      this.handleScroll();
    },
    handleScroll() {
      let element = document.getElementById('rightScrollTop');
      utilJs.elementLoading(element, () => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.rightListArr.length > 0) {
          this.initList(1, this.initCatId, 2, this.page, 10, this.searchText);
        }
      })
    },
    initList(level, parentId, showType, page, limit, prodName) {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}courses/v2/categoryShow?level=${level}&parentId=${parentId}&showType=${showType}&page=${page}&limit=${limit}&prodName=${prodName}`, res => {
        if (this.page == 1) {
          this.rightListArr = res.list.data;
        } else {
          this.rightListArr = [...this.rightListArr, ...res.list.data];
        }
        if (res.list.total * 1 == this.rightListArr.length) {
          this.dataStatus = res.list.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          this.page++
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    swichMenu(index, catId) {
      if (index == this.current) return;
      this.current = index;
      if (!this.isApp) {
        this.scrollLeftView(index);
        this.$refs.rightScrollTop.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
      // 初始化数据
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.initList(1, catId, 2, 1, 10, '');
      this.$emit('swichMenuOne', index, catId)
    },
    scrollLeftView(index) {
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        this.getEleHeight('.menu-scroll-view', 'menuHeight');
        this.getEleHeight('.menu-tab-item', 'menuItemHeight');
      }
      this.$refs.scrollTop.scrollTo({
        top: index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2,
        behavior: 'smooth'
      })
    },
    getEleHeight(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = document.querySelector(elClass);
        if (!query) {
          setTimeout(() => {
            this.getEleHeight(elClass);
          }, 10);
          return;
        }
        this[dataVal] = query.clientHeight;
      })
    }
  },
}
</script>

<style lang="less" scoped>
.classifyItem:nth-child(3n + 2) {
  margin-left: 1.575rem;
  margin-right: 1.575rem;
}
.classifyItem1:nth-child(2n + 1) {
  margin-right: 0.5rem;
}
.active {
  background: #fff;
}
.active:before {
  position: absolute;
  top: 0.95rem;
  left: 0.1rem;
  width: 0.15rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  background: var(--rgbcolor);
  content: "";
}
.fixTop {
  position: fixed;
  z-index: 100;
  width: calc(16rem - 3.75rem);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  overflow: hidden;
  padding: 0.4rem 0;
  background: #fff;
}
.w204 {
  width: 5.1rem;
}
.h132 {
  height: 3.4rem;
}
.active {
  background: #fafafa;
}
.select-center {
  background: #fafafa;
}
</style>